<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://sduept.security.el/func"
	template="/template/template.xhtml">
	<ui:define name="head">
	<title>精益化评价分析</title>
		<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
		<style>
	
.row {
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: -3px;
}

.col-sm-4, .col-sm-12, .col-sm-9 {
    float: left;
    padding-left: 0px;
    padding-right: 0px;
}

.col-sm-3 {
    float: left;
    padding-left: 10px;
    padding-right: 0px;
}

.col-sm-8 {
    float: left;
    padding-left: 0px;
    padding-right: 8px;
}

.col-sm-6 {
    float: left;
    padding-left: 5px;
    padding-right: 0px;
}

.info-box1 {
    display: block;
    min-height: 75px;
    background: #fff;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 2px;
    margin-bottom: 15px;
}
.info-box-icon1 {
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
    display: block;
    float: left;
    height: 75px;
    width: 75px;
    text-align: center;
    font-size: 45px;
    line-height: 90px;
    background: rgba(0,0,0,0.2);
}

.info-box-number {
    display: block;
    font-size: 22px;
}

.info-box-content1 {
    padding: 5px 10px;
    margin-left: 60px;
}

.pull-right {
    float: right!important;
    font-size: 16px;
}

.nav-tabs-custom {
    margin-bottom: 0px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 3px;
}

.img-normal {
	max-width: 90px;
    max-height: 90px;
    height: auto;
    float: left;
}
.img-small {
    max-width: 55px;
    max-height: 55px;
    height: auto;
    float: left;
}
.progress.sm {
    height: 10px;
    margin-bottom: 3px;
    margin-top: 8px;
    margin-right: 10px;
}
.progress.sm1 {
    height: 10px;
    margin-bottom: 3px;
    margin-top: 8px;
}

.progress-group .progress-number {
    float: right;
    margin-right: 10px;
}

#LAY_Detail {
    height: 658px;
    width: 98%;
    margin-left: 10px;
    margin-right: 10px;
}

</style>
</ui:define>

<ui:define name="content">
	<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
		<p:commandButton value="是" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
		<p:commandButton value="否" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
	</p:confirmDialog>
	<div>
		<h:form id="queryForm">
			<div class="box box-primary">
				<div style="height: 50px; padding-top: 10px;padding-left:10px">
					<p:outputLabel value="评价计划：" style="margin-right:10px"/>
					<p:autoComplete placeholder="输入拼音首字母可查" scrollHeight="400" dropdown="true"  
						var="p" itemLabel="#{p.name}" itemValue="#{p.id}" size="50" 
						completeMethod="#{inspectionPlanAnalysisController.complateInspectionPlan}" >
						<p:ajax event="itemSelect" update="detailPanel stationScoreTb selectedPlan riskLevelTb riskLevelChartData" oncomplete="onPlanChanged()"
							listener="#{inspectionPlanAnalysisController.changeSelectPlan}" />
					</p:autoComplete>
					<h:inputHidden value="#{inspectionPlanAnalysisController.selectedPlan.id}" id="selectedPlan"  />
				</div>
			</div>
			<p:outputPanel id="detailPanel" style="width:100%">
				<div class="row">
					<div class='col-sm-12'>
						<div class='col-sm-9'>
							<div class="box box-primary">
								<div class='box-header with-border'>
									<h5 class='box-title'>#{inspectionPlanAnalysisController.selectedPlan.name}</h5>
								</div>
								<div class="box-body">
									<div class="row">
										<div class="col-sm-12">
											<div class='col-sm-4'>
												<div class="info-box1">
													<span><img class="img-small" src="/resources/img/planProgressIcons/plan.png" /></span>
													<div class="info-box-content">
														<div class="col-sm-12">
															<div class='col-sm-6'>
																<span class="info-box-text">计划开始时间</span>
																<span class="info-box-number1">#{inspectionPlanAnalysisController.startDate}</span>
															</div>
															<div class='col-sm-6'>
																<span class="info-box-text">计划结束时间</span>
																<span class="info-box-number1">#{inspectionPlanAnalysisController.endDate}</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class='col-sm-4'>
												<div class="info-box1">
													<span><img class="img-small" src="/resources/img/planProgressIcons/actual.png" /></span>
													<div class="info-box-content">
														<div class="col-sm-12">
															<div class='col-sm-6'>
																<span class="info-box-text">实际开始时间</span>
																<span class="info-box-number1">#{inspectionPlanAnalysisController.actualStartDate}</span>
															</div>
															<div class='col-sm-6'>
																<span class="info-box-text">实际结束时间</span>
																<span class="info-box-number1">#{inspectionPlanAnalysisController.actualEndDate}</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class='col-sm-4'>
												<div class="info-box1">
													<span><img class="img-small" src="/resources/img/planProgressIcons/responsible.png" /></span>
													<div class="info-box-content">
														<div class="col-sm-12">
															<div class='col-sm-6'>
																<span class="info-box-text">责任人</span>
																<span class="info-box-number1">#{inspectionPlanAnalysisController.selectedPlan.responsible}</span>
															</div>
															<div class='col-sm-6'>
																<span class="info-box-text">创建人</span>
																<span class="info-box-number1">#{inspectionPlanAnalysisController.selectedPlan.creator}</span>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-12">
											<div class="clearfix">
												<span class="pull-left" style="font-size:16px">计划完成率：#{inspectionPlanAnalysisController.finishRatio}%</span>
												<small class="pull-right">
													<p:commandLink value="查看详情" onclick="openInspectionStaionComplateDetail()" />
												</small>
											</div>
											<div class="progress sm1">
												<div class="progress-bar progress-bar-green" style="width:#{inspectionPlanAnalysisController.finishRatio}%">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class='col-sm-3'>
							<div class="row">
								<div class="info-box">
									<span><img class="img-normal" src="/resources/img/planProgressIcons/all.png" /></span>
									<div class="info-box-content">
										<span class="info-box-text">变电站总数</span>
										<span class="info-box-number">#{inspectionPlanAnalysisController.stationsAll.size()}</span>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="info-box">
									<span><img class="img-normal" src="/resources/img/planProgressIcons/finish.png" /></span>
									<div class="info-box-content">
										<span class="info-box-text">已完成</span>
										<span class="info-box-number">#{inspectionPlanAnalysisController.stationsFinished.size()}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</p:outputPanel>
			<div class="box box-solid">
				<div class="box-body">
					<div class="nav-tabs-custom">
						<ul class="nav nav-tabs pull-left" >
							<li id='li0' class="active" ><a href="#riskLevelPane" data-toggle="tab" id="t0">问题等级分析</a></li>
							<li id='li1' ><a href="#scorePane" data-toggle="tab" id="t1">分数分析</a></li>
							<li id='li2' ><a href="#itemsPane" data-toggle="tab" id="t2" >风险项分析</a></li>
							<li id='li3' ><a href="#rectificationPlanPane" data-toggle="tab" id="t2" >整改进度分析</a></li>
						</ul>
						<h:inputHidden value="#{inspectionPlanAnalysisController.riskLevelCountStr}" id="riskLevelChartData"></h:inputHidden>
						<div class="tab-content no-padding">
						     <!--问题等级分析 -->
							<div class="chart tab-pane active" id="riskLevelPane" style="position: relative" >
							     <div class="row">
									<div class='col-sm-12'>
									  <div class='col-sm-6'>
									     <div class="box box-primary">
									       <div class="box-header">
									       	 <h3 class="box-title">问题等级数量</h3>
									       </div>
									       <div clas="box-body">
									      	 <p:dataTable id="riskLevelTb" value="#{inspectionPlanAnalysisController.riskLevelCountDTOs}" var="riskLevelCountDTO" 
									      	  style="text-align:center" emptyMessage="暂无数据" paginator="true" rows="10" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
								                 currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} 记录"
								                 rowsPerPageTemplate="5,10,15" paginatorPosition="bottom">
								                  	<p:column headerText="被检单位">
								                  	   <h:outputText value="#{riskLevelCountDTO.name}" style="text-align:center"></h:outputText>
								                  	</p:column>
								                  	<p:column headerText="一级">
								                  	   <p:commandLink rendered="#{!'总计'.equals(riskLevelCountDTO.name)}" value="#{riskLevelCountDTO.levelOneCount}" style="color:blue;text-decoration:underline" onclick="openDetailDlg('一级','#{riskLevelCountDTO.name}')"></p:commandLink>
								                  	   <h:outputText rendered="#{'总计'.equals(riskLevelCountDTO.name)}" value="#{riskLevelCountDTO.levelOneCount}"/>
								                  	</p:column>
								                  	<p:column headerText="二级">
								                  	   <p:commandLink rendered="#{!'总计'.equals(riskLevelCountDTO.name)}" value="#{riskLevelCountDTO.levelTwoCount}" style="color:blue;text-decoration:underline" onclick="openDetailDlg('二级','#{riskLevelCountDTO.name}')"></p:commandLink>
								                  	   <h:outputText rendered="#{'总计'.equals(riskLevelCountDTO.name)}" value="#{riskLevelCountDTO.levelTwoCount}"/>
								                  	</p:column>
								                  	<p:column headerText="三级">
								                  	   <p:commandLink rendered="#{!'总计'.equals(riskLevelCountDTO.name)}" value="#{riskLevelCountDTO.levelThreeCount}" style="color:blue;text-decoration:underline" onclick="openDetailDlg('三级','#{riskLevelCountDTO.name}')"></p:commandLink>
								                  		<h:outputText rendered="#{'总计'.equals(riskLevelCountDTO.name)}" value="#{riskLevelCountDTO.levelThreeCount}"/>
								                  	</p:column>
								                  	<p:column headerText="四级">
								                  	   <p:commandLink rendered="#{!'总计'.equals(riskLevelCountDTO.name)}" value="#{riskLevelCountDTO.levelFourCount}" style="color:blue;text-decoration:underline" onclick="openDetailDlg('四级','#{riskLevelCountDTO.name}')"></p:commandLink>
								                  	   <h:outputText rendered="#{'总计'.equals(riskLevelCountDTO.name)}" value="#{riskLevelCountDTO.levelFourCount}"/>
								                  	</p:column>
								                  	<p:column headerText="总计">
								                  	   <h:outputText value="#{riskLevelCountDTO.totalCount}" ></h:outputText>
								                  	</p:column>
							                  </p:dataTable>
									       </div>
								          </div>
									  </div>
									  <div class='col-sm-6'>
									       <!--某分子公司下某等级具体信息-->
									       <div class="box box-primary">
									         <div class="box-header">
									         	<h3 class="box-title">问题等级数量分布</h3>
									         </div>
									         <div class="box-body">
									         	<div id="riskLevelBar" style="height:300px;width:100%;text-align: center"></div>
									         </div>
									       </div>
									  </div>
								    </div>
								 </div>
							</div>
							<!-- 分数分析 -->
							<div class="chart tab-pane" id="scorePane" style="position: relative" >
								<div class="row">
									<div class='col-sm-12'>
										<div class='col-sm-6'>
											<div class="box box-primary">
												<div class="box-header with-border">
													<h3 class="box-title">变电站分数分布图</h3>
												</div>
												<div class="box-body">
													<div id='scoreDistribution' style="height: 415px; margin: 0 auto;text-align:center;color:grey;font-size:16px;font-weight:bold"/>
												</div>
											</div>
										</div>
										<div class='col-sm-6'>
											<div class="box box-primary">
												<div class="box-header with-border"><h3 class="box-title">变电站排行榜</h3></div>
												<div class="box-body">
													<div class="tab-content no-padding" style="overflow: auto; height: 415px">
														<p:dataTable id="stationScoreTb" widgetVar="stationScoreTb" emptyMessage="无记录"
															value="#{inspectionPlanAnalysisController.dtos}" var="dto" style="text-align:center" >
															<p:column headerText="排名" style="width:40%">
																<h:outputText value="#{dto.order}" />
															</p:column>
															<p:column headerText="变电站" style="width:40%">
																<h:outputText value="#{dto.station.stationName}" />
															</p:column>
															<p:column headerText="扣分" style="width:40%">
																<h:outputText value="#{dto.station.deduct}" />
															</p:column>
														</p:dataTable>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 风险项分析 -->
							<div class="chart tab-pane" id="itemsPane" style="position: relative" >
								<div class="row">
									<div class="col-sm-12">
										<div class="col-sm-4">
											<div class="box box-primary">
												<div class="box-header with-border"><h3 class="box-title">问题设备风险分布图</h3></div>
												<div class="box-body">
													<div id='dangerlevelDistribution' style="height: 400px; margin: 0 auto;text-align:center;color:grey;font-size:16px;font-weight:bold" />
												</div>
											</div>
										</div>
										<div class="col-sm-8">
											<div class="box box-primary">
												<div class="box-header with-border"><h3 class="box-title">失分区</h3></div>
												<div class="box-body">
													<div id='deductBar' style="height: 400px; margin: 0 auto;text-align:center;color:grey;font-size:16px;font-weight:bold"/>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 整改进度分析 -->
							<div class="chart tab-pane" id="rectificationPlanPane" style="position: relative">
								<div class="row">
									<div class="col-sm-12">
										<div class="col-sm-4">
											<div class="box box-primary">
												<div class="box-header with-border"><h3 class="box-title">问题分类统计图</h3></div>
												<div class="box-body">
													<div id='questionType' style="height: 400px; margin: 0 auto;text-align:center;color:grey;font-size:16px;font-weight:bold" />
												</div>
											</div>
										</div>
										<div class="col-sm-8">
											<div class="box box-primary">
												<div class="box-header with-border"><h3 class="box-title">整改计划完成情况</h3></div>
												<div class="box-body">
													<div id='questionTypeBar' style="height: 400px; margin: 0 auto;text-align:center;color:grey;font-size:16px;font-weight:bold"/>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</h:form>
		<!-- 计划完成详情：各变电站完成率 -->
		<div id='pDiv'></div>
	</div>
</ui:define>
<ui:define name="contentend">
	<script src="/resources/js/tables/mytable.js" />
	<script src="/resources/js/mymodal.js" />
	<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js" />
	<script src="#{request.contextPath}/resources/js/mycharts/pieChart.js" />
	<script src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js" />
	<script src="inspectionPlanAnalysis.js" />
	<script>
		function openDetailDlg(riskLevel,acceptName){
			var planId = document.getElementById("queryForm:selectedPlan").value;
			MyModal.showModal("/ui/equipmentAssessment/statistics/riskLevelAnalyseDetailDLg.xhtml?acceptName="
					+encodeURI(encodeURI(acceptName))+"&amp;riskLevel="+encodeURI(encodeURI(riskLevel))+"&amp;planId="+planId);
		}
		function openInspectionStaionComplateDetail(){
			getStationComplateDate();
			layer.open({
				type: 1,
				title: ["各变电站完成情况","font-size:18px;"],
				closeBtn: false,
				maxmin : true,
				area: ['800px', '700px'],
				shade: 0.5,
				id: 'LAY_Detail', //设定一个id，防止重复弹出
				moveType: 1, //拖拽模式，0或者1
				content: $('#pDiv'),
				btn: ['关闭'],
		        btnAlign: 'c',
		        yes:function(index, layero){
		        	$("#pDiv").empty();
		        	layer.close(index);
		        }
		    });
		}
	</script>
</ui:define>
</ui:composition>